* { margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, sans-serif; }
        body { background: #0f172a; display: flex; justify-content: center; padding: 20px; }
        .container { max-width: 1000px; width: 100%; background: #1e293b; padding: 30px; border-radius: 20px; }
        h1 { color: #38bdf8; margin-bottom: 20px; }
        .panel { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
        .left, .right { background: #334155; padding: 20px; border-radius: 10px; }
        .file-area { border: 2px dashed #60a5fa; padding: 20px; text-align: center; border-radius: 10px; cursor: pointer; }
        .file-area:hover { background: #3b4a5f; }
        input, select, textarea, button { width: 100%; padding: 10px; margin: 10px 0; border-radius: 5px; border: none; }
        button { background: #2563eb; color: white; cursor: pointer; font-weight: bold; }
        button:hover { background: #1d4ed8; }
        button:disabled { background: #64748b; cursor: not-allowed; }
        .badge { background: #0f172a; color: white; padding: 5px 10px; border-radius: 5px; display: inline-block; margin: 5px 0; }
        #preview { min-height: 100px; background: #0f172a; padding: 15px; border-radius: 5px; color: white; }
        .preview-image { max-width: 100%; max-height: 200px; border-radius: 5px; margin-top: 10px; }
        .supported-formats { color: #94a3b8; font-size: 0.8rem; margin-top: 5px; }
        .file-details { background: #1e293b; padding: 10px; border-radius: 5px; margin: 10px 0; }